<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>User Login</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="script" http-equiv="Content-Script-Type" content="text/javascript"/>
    <script type="text/javascript" src="soapclient.js"></script>
    <script type="text/javascript">
        var loginServiceUrl = "https://localhost:8443/services/AuthenticatorService";

        function login() {
            var pl = new SOAPClientParameters();
            pl.add("userName", document.getElementById("username").value);
            pl.add("password", document.getElementById("password").value);
            SOAPClient.invoke(loginServiceUrl, "loginService", pl, true, userLogin_callBack);
        }
        function clearValues() {
            document.getElementById("username").value = "";
            document.getElementById("password").value = "";
        }
        function userLogin_callBack(r) {
            if (r == null || r.loginServiceReturn == "false") {
                document.getElementById("result").innerHTML = "Login Unsuccessful... Username: " +
                        document.getElementById("username").value + ", Password: " +
                        document.getElementById("password").value + "\n" +
                        document.getElementById("result").innerHTML;
            }
            else if (r.loginServiceReturn == "true") {
                document.getElementById("result").innerHTML = "Login Successful... Username: " +
                        document.getElementById("username").value + ", Password: " +
                        document.getElementById("password").value + "\n" +
                        document.getElementById("result").innerHTML;
            }
        }
    </script>
</head>
<body style="background-color: #D2D2D2">
<div style="width: 250px; height: 100px; padding: 10px; margin: 150px auto; border: 1px solid white; background-color: #87B1DC">
    <table style="margin: auto">
        <tr>
            <td>Username</td>
            <td><input type="text" id="username" width="200px"/></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" id="password"/></td>
        </tr>
        <tr>
            <td align="center" colspan="2"><input type="button" onclick="login();" id="submit"
                                                  value="Login"/>&nbsp;<input type="button" onclick="clearValues();"
                                                                              value="Clear"/></td>
        </tr>
    </table>
</div>

<div style="background-color: #87B1DC; bottom: 0px; position: absolute; width: 100%; left: 0pt; right: 0pt; height: 150px; border-top: 2px solid white">
    <div style="font-size: 24px; line-height: 30px;margin:0; margin-bottom: 5px; height: 30px; font-weight: bold; padding-left: 10px; color:#333333; font-style: italic;">Result</div>
    <textarea rows="5" cols="100" id="result" disabled="true" style="font-size: 16px; color: red; border: none; padding: 0; margin: 0; height: 115px; width: 100%; bottom: 0"></textarea>
</div>
</body>
</html>